<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>用户管理系统</title>
    <link rel="stylesheet" href="styles.css">
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取用户列表元素
            const userList = document.getElementById('userList');
            // 获取更新用户表单元素
            const updateUserForm = document.getElementById('updateUserForm');
            // 获取遮罩层元素，确保选择器正确（之前此处存在空格导致选择器错误问题已修正）
            const modalOverlay = document.querySelector('.modal-overlay');

            // 显示更新用户表单的函数，同时显示遮罩层，并动态调整表单位置
            function showUpdateForm() {
                if (userList && updateUserForm && modalOverlay) {
                    const userListRect = userList.getBoundingClientRect();
                    const userListHeight = userListRect.height;
                    const userListTop = userListRect.top;
                    // 根据用户列表的位置和高度计算表单的位置，确保在用户列表下方显示
                    updateUserForm.style.top = `${userListTop + userListHeight + 20}px`;
                    updateUserForm.style.left = '50%';
                    updateUserForm.style.transform = 'translateX(-50%)';

                    modalOverlay.style.display = 'block';
                    updateUserForm.style.display = 'block';
                } else {
                    console.error('部分元素未获取到，无法正常显示更新表单');
                }
            }

            // 隐藏更新用户表单的函数，同时隐藏遮罩层
            function hideUpdateForm() {
                if (modalOverlay && updateUserForm) {
                    modalOverlay.style.display = 'none';
                    updateUserForm.style.display = 'none';
                } else {
                    console.error('部分元素未获取到，无法正常隐藏更新表单');
                }
            }

            // 创建显示更新用户表单的按钮，并添加点击事件
            const showUpdateButton = document.createElement('button');
            showUpdateButton.textContent = '显示更新用户表单';
            showUpdateButton.onclick = showUpdateForm;
            document.body.appendChild(showUpdateButton);

            // 给更新用户表单的提交按钮添加提交事件监听器，阻止默认提交行为并处理更新逻辑
            const updateSubmitButton = document.getElementById('updateUserForm').querySelector('button[type="submit"]');
            if (updateSubmitButton) {
                updateSubmitButton.addEventListener('click', function (e) {
                    e.preventDefault();
                    const id = document.getElementById('updateId').value;
                    const name = document.getElementById('updateName').value;
                    const age = document.getElementById('updateAge').value;
                    // 这里假设你在script.js中有对应的updateUser函数来处理实际的更新请求，此处仅为示意调用逻辑
                    updateUser(id, name, age);
                });
            } else {
                console.error('未获取到更新用户表单的提交按钮，无法添加提交事件监听器');
            }

            // 给退出按钮添加点击事件监听器，调用hideUpdateForm函数来隐藏表单和遮罩层
            const exitButton = document.querySelector('.exit-button');
            if (exitButton) {
                exitButton.addEventListener('click', hideUpdateForm);
            } else {
                console.error('未获取到退出按钮，无法添加点击事件监听器');
            }
        });

        // 获取所有用户信息的函数，此处假设你在script.js中有对应的实现通过AJAX请求获取数据等逻辑
        function getUsers() {
            // 具体实现逻辑应该在script.js中，比如创建XHR对象、设置请求等，此处仅为示意调用
            fetchUsers();
        }

        // 删除用户功能，同样假设script.js中有对应deleteUser的实际请求处理逻辑
        function deleteUser() {
            const id = document.getElementById('deleteId').value;
            // 调用script.js中对应的删除用户函数，此处仅为示意
            deleteUserById(id);
        }
    </script>
</head>

<body>
<h1>用户管理系统</h1>

<!-- 查询所有用户按钮 -->
<button onclick="getUsers()">查询所有用户</button>

<!-- 添加用户表单 -->
<form id="addUserForm">
    <label for="name">姓名</label>
    <input type="text" id="name" placeholder="姓名">
    <label for="age">年龄</label>
    <input type="number" id="age" placeholder="年龄">
    <button type="submit">添加用户</button>
</form>

<!-- 更新用户表单（先隐藏，点击对应按钮再显示） -->
<form id="updateUserForm">
    <label for="updateId">用户ID</label>
    <input type="number" id="updateId" placeholder="用户ID">
    <label for="updateName">新姓名</label>
    <input type="text" id="updateName" placeholder="新姓名">
    <label for="updateAge">新年龄</label>
    <input type="number" id="updateAge" placeholder="新年龄">
    <button type="submit">更新用户</button>
    <button class="exit-button" onclick="hideUpdateForm()">退出</button>
</form>

<!-- 删除用户输入框 -->
<input type="number" id="deleteId" placeholder="要删除的用户ID">
<button onclick="deleteUser()">删除用户</button>

<div id="userList"></div>

<script src="script.js"></script>
</body>

</html>